<template>
	<NavBar :obj="{ title: title ? title : '我的挂单', color: '#000', backgroundColor: '#fff' }" />
	<up-sticky :offset-top="offsetTop">
		<view class="types">
			<up-subsection :list="types" mode="subsection" :current="0" :activeColor="theme.themeColor" fontSize="25rpx" @change="typeChange"></up-subsection>
		</view>
		<view class="tabs">
			<up-tabs
				:list="condition"
				@click="conditionCah"
				:scrollable="false"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:lineColor="theme?.themeColor"
			></up-tabs>
		</view>
	</up-sticky>
	<view class="fill">
		<view class="show-load" v-if="showLoad" style="padding: 30upx">
			<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
		</view>
		<view class="item" v-for="(item, index) in list" :key="index">
			<view class="top flex items-center justify-between">
				<view class="times">发布时间：{{ item.create_time }}</view>
				<view class="status">{{ item.status_name }}</view>
			</view>

			<view class="gas">
				<view class="flex items-center line justify-between">
					<view class="line-item flex flex-col items-center justify-between">
						<text class="val rmb-black">{{ item.price }}</text>
						<text class="t">单价</text>
					</view>
					<view class="line-item flex flex-col items-center justify-between">
						<text class="val">{{ item.amount }}</text>
						<text class="t">数量</text>
					</view>
					<view class="line-item flex flex-col items-center justify-between">
						<text class="val rmb-black">{{ item.total_merit }}</text>
						<text class="t">总价值</text>
					</view>
				</view>
			</view>

			<view class="gas">
				<view class="flex items-center line justify-between">
					<view class="line-item flex items-center">
						<text class="t">剩余数量</text>
						<text class="val ml-30">{{ item.surplus_amount }}</text>
					</view>
					<view class="line-item flex items-center">
						<text class="t">剩余价值</text>
						<text class="val rmb-black ml-30">{{ item.surplus_merit }}</text>
					</view>
				</view>
			</view>

			<view class="bottom flex items-center">
				<view class="box flex items-center justify-center" v-for="(item2, index2) in item.method" :key="index2">
					<image :src="imgUrl + item2.icon"></image>
					<text>{{ item2.title }}</text>
				</view>
			</view>

			<view class="flex items-center justify-end">
				<view class="btn theme-btn" v-if="item.status == 1" @click="revoke(item)">撤回</view>
			</view>
		</view>

		<view class="empty" style="padding-bottom: 20%" v-if="!list.length && !showLoad">
			<up-empty icon="/static/product/ic_zerodata@2x.png" iconSize="392upx" marginTop="50%" text="暂无" />
		</view>
	</view>
</template>

<script setup>
	import { ref, inject, reactive } from 'vue';
	import { port, goUrl, hint, imgUrl, loading, closeLoading } from '/service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	import { useThemeStore } from '@/stores/theme';
	const theme = useThemeStore();
	const showLoad = ref(false);
	const title = ref('');
	const offsetTop = ref(0);
	const list = ref([]);
	const listRef = ref({
		page: 1,
		type: 1,
		status: ''
	});

	const types = reactive(['卖单', '买单']);

	const condition = reactive([
		{ name: '全部', val: '' },
		{ name: '交易中', val: 1 },
		{ name: '已完成', val: 2 },
		{ name: '已取消', val: 3 }
	]);

	const conditionCah = (e) => {
		list.value.length = 0;
		listRef.value.status = e.val;
		listRef.value.page = 1;

		getTradeOnlineMyRecord();
	};

	const typeChange = (e) => {
		list.value.length = 0;
		listRef.value.page = 1;

		listRef.value.type = e + 1;
		getTradeOnlineMyRecord();
	};

	const revoke = (item) => {
		uni.showModal({
			title: '请确认',
			content: '确定要撤单吗？',
			confirmColor: theme.themeColor,
			success: async function (res) {
				if (res.confirm) {
					loading();
					let res = await port('revokeTradeOnline', { id: item.id });
					setTimeout(() => {
						hint(res.msg);
						listRef.value.page = 1;
						list.value.length = 0;
						getTradeOnlineMyRecord();
						closeLoading();
					}, 300);
				}
			}
		});
	};

	async function getTradeOnlineMyRecord(bom = false) {
		!bom ? (showLoad.value = true) : '';
		let res = await port('getTradeOnlineMyRecord', listRef.value);
		showLoad.value = false;
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			listRef.value.page++;
		}
	}
	onLoad((e) => {
		title.value = e.title;
	});

	onShow(() => {
		// #ifdef MP-WEIXIN
		offsetTop.value = inject('minTop');
		// #endif
		listRef.value.page = 1;
		list.value.length = 0;
		getTradeOnlineMyRecord();
	});

	onReachBottom(() => {
		getTradeOnlineMyRecord(true);
	});
</script>

<style scoped lang="scss">
	::v-deep {
		page {
			background-color: #f4f5f8;
		}
		.u-subsection--subsection {
			height: 68rpx;
		}
	}
	.types {
		background-color: #fff;
		padding: 10rpx 30rpx;
	}
	.tabs {
		background-color: #fff;
	}
	.fill {
		margin: 0 30rpx;

		.item {
			background: #ffffff;
			border-radius: 20rpx;
			margin: 30rpx 0;
			padding: 30rpx;
			position: relative;
			.top {
				.times {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
				.status {
					font-weight: 400;
					font-size: 26rpx;
					color: $theme-color;
					background: $theme-light-color;
					border-radius: 6rpx;
					padding: 5rpx 15rpx;
				}
				margin-bottom: 30rpx;
			}
			.gas {
				background: #f6f6f6;
				border-radius: 16rpx;
				padding: 30rpx;
				margin-bottom: 16rpx;
				.line {
					.line-item {
						margin-right: 30rpx;
						&:last-child {
							margin-right: 0;
						}
						.t {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							margin-top: 5rpx;
						}
						.val {
							font-weight: 500;
							font-size: 34rpx;
							color: #000000;
						}
						.ml-30 {
							margin-left: 15rpx;
						}
					}
				}
			}
			.bottom {
				gap: 8rpx;
				margin-top: 25rpx;
				.box {
					background: #ffffff;
					border-radius: 18rpx;
					border: 1px solid #dbdbdb;
					padding: 5rpx 14rpx;
					> image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 5rpx;
					}
					> text {
						font-weight: 400;
						font-size: 20rpx;
						color: #888888;
						margin-top: -3rpx;
					}
				}
			}
			.btn {
				// position: absolute;
				// right: 30rpx;
				// bottom: 20rpx;
				padding: 8rpx 30rpx;
				border-radius: 12rpx;
			}
		}
	}
</style>
